import React, { Component } from "react";
import { Form, Table, Input, Button, Row, Col, Radio, Modal,Divider,DatePicker, Popconfirm } from "antd";
import Content from "../../components/Content";
import moment from 'moment';
const { Item } = Form;
const { Search } = Input;

class AcquisitionAddForm extends Component {
  constructor(props) {
    super(props);
  }

  deleteRecord(record) {
    let errorMsgArea = document.getElementById('errorMsg');

    let url = global.api.acquisition;

    /** 
    switch (record.Acq_type) {
      case 1: // tu
        url = global.api.acquisitionSoil;
        break;
      case 2: // shui
        url = global.api.acquisitionWater;
        break;       
      case 3: // kuang
        url = global.api.acquisitionOer;
        break;
      case 4: // zhiwu
        url = global.api.acquisitionPlant;
        break; 
      case 5: // dongwu
        url = global.api.acquisitionAnimal;
        break;   
      case 6: // qita
        url = global.api.acquisitionOther;
        break;   
      case 7: // qitalaiyuan
        url = global.api.acquisitionOther;
        break;             
      default:
        break;
    }
    */

    // 删除数据
    global.deletedata.del(url + record.id + '/', record)
    .then(res => {
      let data = this.state.data;
      for( let i = 0; i < data.length; i++ ) {
        let one = data[i];
        if( one.id == record.id ) {
          data.splice( i, 1 );
          break;
        }
      }
     
      this.setState({
        data : data
      })
    })
    .catch(err => {
      errorMsgArea.innerHTML = err;
    }) 
  }

  editRecord(record, canEdit) {
    let id = record.id;
    // 编辑数据

    this.setState({
      viewRecord: record,
      showViewModal: true,
      editRecord: record,
      canEdit: canEdit
    })

  }

  update = evt => {
    evt.preventDefault();

    let Acq_type = this.state.editRecord.acqType;
    let id = this.state.editRecord.id;
    let add_height = document.getElementById('add_height').value;
    let habitat_type = document.getElementById('habitattype').value;
    let add_longitude = document.getElementById('add_longitude').value;
    let add_latitude = document.getElementById('add_latitude').value;
    let in_country = document.getElementById('in_country').value;
    let r_cjdq = document.getElementById('r_cjdq').value;
    let r_cjdd = document.getElementById('r_cjdd').value;

    let in_climate = document.getElementById('in_climate').value;
    let in_weather = document.getElementById('in_weather').value;
    let q_time = this.state.uq_time;
    let worker = document.getElementById('worker').value;
    let in_affiliation = document.getElementById('in_affiliation').value;
    let otherremarks = document.getElementById('otherremarks').value;
    let store_place = document.getElementById('store_place').value;
    let store_num = document.getElementById('store_num').value;
    let phvalue = document.getElementById('phvalue').value || document.getElementById('soilph').value || document.getElementById('mineral_ph').value;

    let field_temperature = document.getElementById('field_temperature').value || document.getElementById('mineral_temperature').value;

    let name = document.getElementById('name').value;
    let naturewater = document.getElementById('naturewater').value;
    let depth = document.getElementById('soildepth').value || document.getElementById('waterdepth').value; 
    let vegetation = document.getElementById('vegetation').value;
    let soilquality = document.getElementById('soilquality').value;
    
    let habitatimage = document.getElementById('habitatimage999').files[0] || this.state.editRecord.habitatimage;

    let mineral_property = document.getElementById('mineral_property').value;
    let minera_ele = document.getElementById('minera_ele').value;
    let plantpart = document.getElementById('plantpart').value;
    let ecologicalfunction = document.getElementById('animals_efficacy').value;
    let animal_parts = document.getElementById('animal_parts').value;

    let remarks = document.getElementById('remark').value;
 
    let typeStr = '';
    let url = global.api.acquisitionPlant;
    switch (Acq_type) {
      case 1: // tu
        url = global.api.acquisitionSoil;
        q_time = this.state.time1;
        typeStr = 'ty';
        break;
      case 2: // shui
        url = global.api.acquisitionWater;
        q_time = this.state.time2;
        typeStr = 'sy';
        break;       
      case 3: // kuang
        url = global.api.acquisitionOer;
        q_time = this.state.time3;
        typeStr = 'kw';
        break;
      case 4: // zhiwu
        url = global.api.acquisitionPlant;
        q_time = this.state.time4;
        typeStr = 'zw';
        break; 
      case 5: // dongwu
        url = global.api.acquisitionAnimal;
        q_time = this.state.time5;
        typeStr = 'dw';
        break;   
      case 6: // qita
        url = global.api.acquisitionOther;
        q_time = this.state.time6;
        typeStr = 'qt';
        break;   
      case 7: // qitalaiyuan
        url = global.api.acquisitionOther;
        q_time = this.state.time7;
        typeStr = 'qt';
        break;             
      default:
        break;
    }

    let formData = new FormData();
    
    formData.append('remark', remarks);
    formData.append('animals_efficacy', ecologicalfunction);
    formData.append('animal_name', name);
    formData.append('animal_parts', animal_parts);
    formData.append('ecologicalfunction', ecologicalfunction);
    formData.append('plantpart', plantpart);
    formData.append('minera_ele', minera_ele);
    formData.append('mineral_ph', phvalue);
    formData.append('mineral_temperature', field_temperature);
    formData.append('mineral_property', mineral_property);
    formData.append('soilph', phvalue);
    formData.append('soilquality', soilquality);
    formData.append('soildepth', depth);
    formData.append('vegetation', vegetation);
    formData.append('waterdepth', depth);
    formData.append('naturewater', naturewater);

    formData.append('habitatimage', habitatimage);
    formData.append('upfile', habitatimage);
    
    formData.append('name', name);
    formData.append('Acq_type', typeStr); 
    formData.append('phvalue', phvalue);
    formData.append('field_temperature', field_temperature);
    formData.append('id', id);
    formData.append('Acq_id', id);
    formData.append('add_height', add_height);
    formData.append('habitat_type', habitat_type);
    formData.append('add_longitude', parseFloat(add_longitude));
    formData.append('add_latitude', parseFloat(add_latitude));
    formData.append('in_country', in_country);
    formData.append('r_cjdq', r_cjdq);
    formData.append('r_cjdd', r_cjdd);
    formData.append('in_climate', in_climate);
    formData.append('in_weather', in_weather);
    formData.append('q_time', q_time);
    formData.append('worker', worker);
    formData.append('q_person', worker);
    formData.append('in_affiliation', in_affiliation);
    formData.append('otherremarks', otherremarks);
    formData.append('habitattype', habitat_type);
    formData.append('store_place', store_place);
    formData.append('store_num', store_num);    

    return global.updatedata.put(url + id + '/', formData)
    .then(res => {  
      Modal.success({
        content: '更新成功!',
      });
      this.loadData(Acq_type);
    })
    .catch(err => {
      Modal.success({
        content: '更新数据失败！',
      });
    }) 

  }

  state = {
    acqType: 1,
    data: [],
    total: 0,
    loading: true,
    pageNum: 1,
    pageSize: 1,

    canEdit: false,

    viewRecord: {},
    showViewModal: false,
    editRecord: false,
    ustore_date: '',
    uq_time: '',

    time1: '',
    time2: '',
    time3: '',
    time4: '',
    time5: '',
    time6: '',
    time7: '',
    modal1Visible: false,
    modal2Visible: false,
    modal3Visible: false,
    modal4Visible: false,
    modal5Visible: false,
    modal6Visible: false
  };

  setModal1Visible(modal1Visible) {
    this.setState({ modal1Visible });
  }

  setModal2Visible(modal2Visible) {
    this.setState({ modal2Visible });
  }
  setModal3Visible(modal3Visible) {
    this.setState({ modal3Visible });
  }
  setModal4Visible(modal4Visible) {
    this.setState({ modal4Visible });
  }
  setModal5Visible(modal5Visible) {
    this.setState({ modal5Visible });
  }
  setModal6Visible(modal6Visible) {
    this.setState({ modal6Visible });
  }
  setModal7Visible(modal7Visible) {
    this.setState({ modal7Visible });
  }

  loadData = (Acq_type, page_index = 1) => {
    let url = global.api.acquisition;

    /**
    let typeStr = '';
    let q_time = '';

    switch (Acq_type) {
      case 1: // tu
        url = global.api.acquisitionSoil;
        q_time = this.state.time1;
        typeStr = 'ty';
        break;
      case 2: // shui
        url = global.api.acquisitionWater;
        q_time = this.state.time2;
        typeStr = 'sy';
        break;       
      case 3: // kuang
        url = global.api.acquisitionOer;
        q_time = this.state.time3;
        typeStr = 'kw';
        break;
      case 4: // zhiwu
        url = global.api.acquisitionPlant;
        q_time = this.state.time4;
        typeStr = 'zw';
        break; 
      case 5: // dongwu
        url = global.api.acquisitionAnimal;
        q_time = this.state.time5;
        typeStr = 'dw';
        break;   
      case 6: // qita
        url = global.api.acquisitionOther;
        q_time = this.state.time6;
        typeStr = 'qt';
        break;   
      case 7: // qitalaiyuan
        url = global.api.acquisitionOther;
        q_time = this.state.time7;
        typeStr = 'qt';
        break;             
      default:
        break;
    }
    */

    return global.getdata.get(url, {page_index: page_index})
    .then(res => {
      this.setState({
        data: res.results,
        total: res.count,
        loading: false
      })
    })
    .catch(err => {
    }) 
  }

  componentDidMount() {
    this.loadData(1);
  }

  onShowSizeChange = (current, pageSize) => {
    this.loadData(this.state.acqType, current, pageSize);
    this.setState({
        pageSize: pageSize
    })
  }

  paginationProps = {
    showSizeChanger: true,//设置每页显示数据条数
    showQuickJumper: false,
    showTotal: () => `共${this.state.total}条`,
    pageSize: this.state.pageSize,
    total: this.state.total,  //数据的总的条数
    onChange: (current) => this.loadData(this.state.acqType, current), //点击当前页码
    onShowSizeChange: (current, pageSize) => {//设置每页显示数据条数，current表示当前页码，pageSize表示每页展示数据条数
        console.log(pageSize);
        this.onShowSizeChange(current, pageSize)
    }
  }  

  onChange = e => {
    document.getElementById('errorMsg').innerHTML = '';

    let acqType = e.target.value;
    if( acqType == 1 ) {
      acqType = 'ty';
    } else if( acqType == 2 ) {
      acqType = 'sy';
    } else if( acqType == 3 ) {
      acqType = 'kw';
    } else if( acqType == 4 ) {
      acqType = 'zw';
    } else if( acqType == 5 ) {
      acqType = 'dw';
    } else if( acqType == 6 ) {
      acqType = 'qt';
    }

    this.setState({
      acqType: acqType,
      loading: true
    });
    this.loadData(acqType);
  };

  onSubmit = evt => {
    evt.preventDefault();
    let errorMsgArea = document.getElementById('errorMsg');

    let Acq_type = this.state.acqType;
    let id = document.getElementById('id').value;
    let add_height = document.getElementById('altitude').value;
    let habitat_type = document.getElementById('habitat_type').value;
    let add_longitude = document.getElementById('longitude').value;
    let add_latitude = document.getElementById('latitude').value;
    let in_country = document.getElementById('gathering_country' + Acq_type).value;
    let r_cjdq = document.getElementById('gathering_area' + Acq_type).value;
    let r_cjdd = document.getElementById('gathering_place' + Acq_type).value;

    let in_climate = document.getElementById('climate_feature' + Acq_type).value;
    let in_weather = document.getElementById('in_weather' + Acq_type).value;
    let q_time = '';
    let worker = document.getElementById('gathering_person' + Acq_type).value;
    let in_affiliation = document.getElementById('gathering_units' + Acq_type).value;
    let otherremarks = document.getElementById('gathering_other' + Acq_type).value;
    let store_place = document.getElementById('store_place' + Acq_type).value;
    let store_num = document.getElementById('store_num' + Acq_type).value;
    let phvalue = document.getElementById('gathering_ph' + Acq_type).value;

    let field_temperature = document.getElementById('gathering_temp' + Acq_type) ? document.getElementById('gathering_temp' + Acq_type).value : "";
    let name = document.getElementById('gathering_name' + Acq_type) ? document.getElementById('gathering_name' + Acq_type).value : "";
    let naturewater = document.getElementById('gathering_naturewater' + Acq_type) ? document.getElementById('gathering_naturewater' + Acq_type).value : "";
    let depth = document.getElementById('gathering_depth' + Acq_type) ? document.getElementById('gathering_depth' + Acq_type).value : "";
    let vegetation = document.getElementById('gathering_vegetation' + Acq_type) ? document.getElementById('gathering_vegetation' + Acq_type).value : "";
    let gathering_tuzhi = document.getElementById('gathering_tuzhi' + Acq_type) ? document.getElementById('gathering_tuzhi' + Acq_type).value : "";
    
    let habitatimage = document.getElementById('habitat_picture' + Acq_type).files[0];

    let mineral_property = document.getElementById('mineral_property' + Acq_type) ? document.getElementById('mineral_property' + Acq_type).value : "";
    let minera_ele = document.getElementById('gathering_specials' + Acq_type) ? document.getElementById('gathering_specials' + Acq_type).value : "";
    let plantpart = document.getElementById('in_parts' + Acq_type) ? document.getElementById('in_parts' + Acq_type).value : "";
    let ecologicalfunction = document.getElementById('for_medicle' + Acq_type) ? document.getElementById('for_medicle' + Acq_type).value : "";
    let animal_parts = document.getElementById('animal_parts' + Acq_type) ? document.getElementById('animal_parts' + Acq_type).value : "";

    let remarks = document.getElementById('remarks' + Acq_type) ? document.getElementById('remarks').value : "";
    let other_src = document.getElementById('other_src' + Acq_type) ? document.getElementById('other_src' + Acq_type).value : "";
    let transfer = document.getElementById('gathering_transfer' + Acq_type) ? document.getElementById('gathering_transfer' + Acq_type).value : "";
    let in_sample = document.getElementById('in_sample' + Acq_type) ? document.getElementById('in_sample' + Acq_type).value : "";

    let typeStr = '';
    let url = global.api.acquisitionPlant;
    switch (Acq_type) {
      case 1: // tu
        url = global.api.acquisitionSoil;
        q_time = this.state.time1;
        typeStr = 'ty';
        break;
      case 2: // shui
        url = global.api.acquisitionWater;
        q_time = this.state.time2;
        typeStr = 'sy';
        break;       
      case 3: // kuang
        url = global.api.acquisitionOer;
        q_time = this.state.time3;
        typeStr = 'kw';
        break;
      case 4: // zhiwu
        url = global.api.acquisitionPlant;
        q_time = this.state.time4;
        typeStr = 'zw';
        break; 
      case 5: // dongwu
        url = global.api.acquisitionAnimal;
        q_time = this.state.time5;
        typeStr = 'dw';
        break;   
      case 6: // qita
        url = global.api.acquisitionOther;
        q_time = this.state.time6;
        typeStr = 'qt';
        break;   
      case 7: // qitalaiyuan
        url = global.api.acquisitionOther;
        q_time = this.state.time7;
        typeStr = 'qt';
        break;             
      default:
        break;
    }

    let formData = new FormData();
    
    formData.append('remark', remarks);
    formData.append('animals_efficacy', ecologicalfunction);
    formData.append('animal_name', name);
    formData.append('animal_parts', animal_parts);
    formData.append('ecologicalfunction', ecologicalfunction);
    formData.append('plantpart', plantpart);
    formData.append('minera_ele', minera_ele);
    formData.append('mineral_ph', phvalue);
    formData.append('mineral_temperature', field_temperature);
    formData.append('mineral_property', mineral_property);
    formData.append('soilph', phvalue);
    formData.append('soilquality', gathering_tuzhi);
    formData.append('soildepth', depth);
    formData.append('vegetation', vegetation);
    formData.append('waterdepth', depth);
    formData.append('naturewater', naturewater);

    formData.append('habitatimage', habitatimage);
    formData.append('upfile', habitatimage);
    
    formData.append('name', name);
    // formData.append('Acq_type', Acq_type); 
    formData.append('Acq_type', typeStr); 
    formData.append('phvalue', phvalue);
    formData.append('field_temperature', field_temperature);
    formData.append('id', id);
    formData.append('Acq_id', id);
    formData.append('add_height', add_height);
    formData.append('habitat_type', habitat_type);
    formData.append('add_longitude', parseFloat(add_longitude));
    formData.append('add_latitude', parseFloat(add_latitude));
    formData.append('in_country', in_country);
    formData.append('r_cjdq', r_cjdq);
    formData.append('r_cjdd', r_cjdd);
    formData.append('in_climate', in_climate);
    formData.append('in_weather', in_weather);
    formData.append('q_time', q_time);
    formData.append('worker', worker);
    formData.append('q_person', worker);
    formData.append('in_affiliation', in_affiliation);
    formData.append('otherremarks', otherremarks);
    formData.append('habitattype', habitat_type);
    formData.append('store_place', store_place);
    formData.append('store_num', store_num);    

    return global.network.post(url, formData)
    .then(res => {
      if( res.id == id ) {
        errorMsgArea.innerHTML='保存成功！';
        window.sessionStorage.setItem('Acq_id', id);
        this.loadData(Acq_type);
      }
    })
    .catch(err => {
      errorMsgArea.innerHTML=err;
    }) 
  };

  onCancel = evt => {
    evt.preventDefault();
    document.getElementById('id').value='';
    document.getElementById('altitude').value='';
    document.getElementById('habitat_type').value='';
    document.getElementById('longitude').value='';
    document.getElementById('latitude').value='';
  };

  selectFile = (evt, idx) => {
    let files = evt.target.files;
    let filename = files[0].name;
    try{
      document.getElementById('habitat_picture_s' + idx).value = filename;
    } catch ( e ) {
      
    }
  }

  render() {
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 4 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      }
    };

    const columns = [
      {
        title: "序号",
        key: "1",
        dataIndex: "id",
        className: "id"
      },
      {
        title: "采集样品编号",
        dataIndex: "Acq_id",
        className: "Acq_id"
      },
      {
        title: "采集地区",
        dataIndex: "r_cjdq",
        className: "r_cjdq"
      },
      {
        title: "采集地点",
        dataIndex: "r_cjdd",
        className: "r_cjdd"
      },
      {
        title: "采集样品类型",
        dataIndex: "Acq_type",
        className: "generic_name"
      },
      {
        title: "采集时间",
        dataIndex: "q_time",
        className: "words"
      },
      {
        title: "操作",
        className: "operate",
        dataIndex: "",
        render: (text, record) => (
          <span>
            <Button type="dashed" onClick={() => this.editRecord(record, false)}>查看</Button>
            <Divider type="vertical" />
            <Button type="dashed" onClick={() => this.editRecord(record, true)}>修改</Button>
            <Divider type="vertical" />
            <Popconfirm title="确认删除吗?" onConfirm={() => this.deleteRecord(record)}>
              <Button type="dashed">删除</Button>
            </Popconfirm>
          </span>
        )
      }
    ];

    let debugValue = 1;
    let dateFormat = 'YYYY-MM-DD HH:mm:ss';

    return (
      <div>
        <Form {...formItemLayout} onSubmit={this.onSubmit} colon={false}>
          <Item label="采集样品编号">
            <Input id="id" defaultValue={debugValue} />
          </Item>
          <Item label="采集样品类型">
            <Radio.Group
              onChange={this.onChange}
              value={this.state.acqType}
              className="radio"
            >
              <Radio value={1}>
                <Button
                  type="primary"
                  onClick={() => this.setModal1Visible(true)}
                >
                  土样
              </Button>
              </Radio>
              <Modal
                title="土样"
                className="kekeke"
                visible={this.state.modal1Visible}
                onOk={() => this.setModal1Visible(false)}
                onCancel={() => this.setModal1Visible(false)}
              >
                <Form {...formItemLayout} onSubmit={this.onSubmit} colon={false}>
                  <Item label="原产国" style={{ display: "flex" }}>
                    <Input defaultValue={debugValue} id="gathering_country1" />
                  </Item>
                  <Item label="采集地区（行政区）">
                    <Input defaultValue={debugValue} id="gathering_area1" />
                  </Item>
                  <Item label="采集地点">
                    <Input defaultValue={debugValue} id="gathering_place1" />
                  </Item>
                  <Item label="生境图片">
                    <Input readOnly id="habitat_picture1" type="file" onChange={env => this.selectFile(env, 1)} style={{display: 'none'}} />
                    <Search
                      readOnly
                      id="habitat_picture_s1"
                      placeholder=""
                      enterButton="上传"
                      onSearch={value => document.getElementById("habitat_picture1").click()}
                    />
                  </Item>
                  <Item label="样品名称">
                    <Input defaultValue={debugValue} id="gathering_name1" />
                  </Item>
                  <Item label="气候特征">
                    <Input defaultValue={debugValue} id="climate_feature1" />
                  </Item>
                  <Item label="天气状况">
                    <Input defaultValue={debugValue} id="in_weather1" />
                  </Item>
                  <Item label="表层以下深度（cm）">
                    <Input defaultValue={debugValue} id="gathering_depth1" />
                  </Item>
                  <Item label="植被特点">
                    <Input defaultValue={debugValue} id="gathering_vegetation1" />
                  </Item>
                  <Item label="土质">
                    <Input defaultValue={debugValue} id="gathering_tuzhi1" />
                  </Item>
                  <Item label="土壤酸碱度(pH值)">
                    <Input defaultValue={debugValue} id="gathering_ph1" />
                  </Item>
                  <Item label="采集时间">
                    <DatePicker onChange={(d,ds) => this.setState({'time1': ds})} format={dateFormat} id="gathering_time1" />
                  </Item>
                  <Item label="采集人员">
                    <Input defaultValue={debugValue} id="gathering_person1" />
                  </Item>
                  <Item label="采集单位">
                    <Input defaultValue={debugValue} id="gathering_units1" />
                  </Item>
                  <Item label="存放位置">
                    <Input defaultValue={debugValue} id="store_place1" />
                  </Item>
                  <Item label="存放数量">
                    <Input defaultValue={debugValue} id="store_num1" />
                  </Item>
                  <Item label="其他备注信息">
                    <Input defaultValue={debugValue} id="gathering_other1"/>
                  </Item>
                </Form>
              </Modal>
              <Radio value={2}>
                <Button
                  type="primary"
                  onClick={() => this.setModal2Visible(true)}
                >
                  水样
              </Button>
              </Radio>

              <Modal
                title="水样"
                visible={this.state.modal2Visible}
                onOk={() => this.setModal2Visible(false)}
                onCancel={() => this.setModal2Visible(false)}
              >
                <Form {...formItemLayout} onSubmit={this.onSubmit} colon={false}>
                  <Item label="原产国">
                    <Input id="gathering_country2"/>
                  </Item>
                  <Item label="采集地区（行政区）">
                    <Input id="gathering_area2"/>
                  </Item>
                  <Item label="采集地点">
                    <Input id="gathering_place2"/>
                  </Item>
                  <Item label="生境图片">
                    <Input id="habitat_picture2" type="file" style={{display: 'none'}} />
                    <Search
                      placeholder=""
                      enterButton="上传"
                      onSearch={value => document.getElementById("habitat_picture2").click()}
                    />
                  </Item>
                  <Item label="样品名称">
                    <Input id="gathering_name2"/>
                  </Item>
                  <Item label="水域性质">
                    <Input id="gathering_naturewater2"/>
                  </Item>
                  <Item label="气候特征">
                    <Input id="climate_feature2"/>
                  </Item>
                  <Item label="天气状况">
                    <Input id="in_weather2"/>
                  </Item>
                  <Item label="水的深度（m）">
                    <Input id="gathering_depth2"/>
                  </Item>
                  <Item label="水温（℃）">
                    <Input id="gathering_temp2"/>
                  </Item>
                  <Item label="水的酸碱度（pH值）">
                    <Input id="gathering_ph2"/>
                  </Item>
                  <Item label="采集时间">
                    <DatePicker  onChange={(d,ds) => this.setState({'time2': ds})} format={dateFormat} id="gathering_time2" />
                  </Item>
                  <Item label="采集人员">
                    <Input id="gathering_person2"/>
                  </Item>
                  <Item label="采集单位">
                    <Input id="gathering_units2"/>
                  </Item>
                  <Item label="存放位置">
                    <Input id="store_place2" />
                  </Item>
                  <Item label="存放数量">
                    <Input id="store_num2" />
                  </Item>
                  <Item label="其他备注信息">
                    <Input id="gathering_other2"/>
                  </Item>
                </Form>
              </Modal>

              <Radio value={3}>
                <Button
                  type="primary"
                  onClick={() => this.setModal3Visible(true)}
                >
                  矿石
              </Button>
              </Radio>
              <Modal
                title="矿石"
                visible={this.state.modal3Visible}
                onOk={() => this.setModal3Visible(false)}
                onCancel={() => this.setModal3Visible(false)}
              >
                <Form {...formItemLayout} onSubmit={this.onSubmit} colon={false}>
                  <Item label="原产国">
                    <Input id="gathering_country3"/>
                  </Item>
                  <Item label="采集地区（行政区）">
                    <Input id="gathering_area3"/>
                  </Item>
                  <Item label="采集地点">
                    <Input id="gathering_place3"/>
                  </Item>
                  <Item label="生境图片">
                    <Input id="habitat_picture3" type="file" style={{display: 'none'}} />
                    <Search
                      placeholder=""
                      enterButton="上传"
                      onSearch={value => document.getElementById("habitat_picture3").click()}
                    />
                  </Item>
                  <Item label="样品名称">
                    <Input id="gathering_name3"/>
                  </Item>
                  <Item label="矿藏性质">
                    <Input id="mineral_property3"/>
                  </Item>
                  <Item label="气候特征">
                    <Input id="climate_feature3"/>
                  </Item>
                  <Item label="天气状况">
                    <Input id="in_weather3"/>
                  </Item>
                  <Item label="矿物中的特色元素">
                    <Input id="gathering_specials3"/>
                  </Item>
                  <Item label="矿藏环境温度（℃）">
                    <Input id="gathering_temp3"/>
                  </Item>
                  <Item label="矿藏环境酸碱度（pH值）">
                    <Input id="gathering_ph3"/>
                  </Item>
                  <Item label="其他备注信息">
                    <Input id="gathering_other3"/>
                  </Item>
                  <Item label="采集时间">
                    <DatePicker  onChange={(d,ds) => this.setState({'time3': ds})} format={dateFormat} id="gathering_time3"/>
                  </Item>
                  <Item label="采集人员">
                    <Input id="gathering_person3"/>
                  </Item>
                  <Item label="采集单位">
                    <Input id="gathering_units3"/>
                  </Item>
                  <Item label="存放位置">
                    <Input id="store_place3" />
                  </Item>
                  <Item label="存放数量">
                    <Input id="store_num3" />
                  </Item>
                </Form>
              </Modal>
              <Radio value={4}>
                <Button
                  type="primary"
                  onClick={() => this.setModal4Visible(true)}
                >
                  植物
              </Button>
              </Radio>
              <Modal
                title="植物"
                visible={this.state.modal4Visible}
                onOk={() => this.setModal4Visible(false)}
                onCancel={() => this.setModal4Visible(false)}
              >
                <Form {...formItemLayout} onSubmit={this.onSubmit} colon={false}>
                  <Item label="原产国">
                    <Input id="gathering_country4"/>
                  </Item>
                  <Item label="采集地区（行政区）">
                    <Input id="gathering_area4"/>
                  </Item>
                  <Item label="采集地点">
                    <Input id="gathering_place4"/>
                  </Item>
                  <Item label="生境图片">
                    <Input id="habitat_picture4" type="file" style={{display: 'none'}} />
                    <Search
                      placeholder=""
                      enterButton="上传"
                      onSearch={value => document.getElementById("habitat_picture4").click()}
                    />
                  </Item>
                  <Item label="植物名称">
                    <Input id="gathering_name4"/>
                  </Item>
                  <Item label="气候特征">
                    <Input id="climate_feature4"/>
                  </Item>
                  <Item label="天气状况">
                    <Input id="in_weather4"/>
                  </Item>
                  <Item label="植物组织或部位">
                    <Input id="in_parts4"/>
                  </Item>
                  <Item label="植物的生态作用或药效">
                    <Input id="for_medicle4"/>
                  </Item>
                  <Item label="其他备注信息">
                    <Input id="gathering_other4"/>
                  </Item>
                  <Item label="采集时间">
                    <DatePicker  onChange={(d,ds) => this.setState({'time4': ds})} format={dateFormat} id="gathering_time4"/>
                  </Item>
                  <Item label="采集人员">
                    <Input id="gathering_person4"/>
                  </Item>
                  <Item label="采集单位">
                    <Input id="gathering_units4"/>
                  </Item>
                  <Item label="存放位置">
                    <Input id="store_place4" />
                  </Item>
                  <Item label="存放数量">
                    <Input id="store_num4" />
                  </Item>
                </Form>
              </Modal>
              <Radio value={5}>
                <Button
                  type="primary"
                  onClick={() => this.setModal5Visible(true)}
                >
                  动物
              </Button>
              </Radio>
              <Modal
                title="动物"
                visible={this.state.modal5Visible}
                onOk={() => this.setModal5Visible(false)}
                onCancel={() => this.setModal5Visible(false)}
              >
                <Form {...formItemLayout} onSubmit={this.onSubmit} colon={false}>
                  <Item label="原产国">
                    <Input id="gathering_country5"/>
                  </Item>
                  <Item label="采集地区（行政区）">
                    <Input id="gathering_area5"/>
                  </Item>
                  <Item label="采集地点">
                    <Input id="gathering_place5"/>
                  </Item>
                  <Item label="生境图片">
                    <Input id="habitat_picture5" type="file" style={{display: 'none'}} />
                    <Search
                      placeholder=""
                      enterButton="上传"
                      onSearch={value => document.getElementById("habitat_picture5").click()}
                    />
                  </Item>
                  <Item label="动物名称">
                    <Input id="gathering_name5"/>
                  </Item>
                  <Item label="气候特征">
                    <Input id="climate_feature5"/>
                  </Item>
                  <Item label="天气状况">
                    <Input id="in_weather5"/>
                  </Item>
                  <Item label="动物组织或部位">
                    <Input id="animal_parts5"/>
                  </Item>
                  <Item label="动物的药效或其他用途">
                    <Input id="for_medicle5"/>
                  </Item>
                  <Item label="其他备注信息">
                    <Input id="gathering_other5"/>
                  </Item>
                  <Item label="采集时间">
                    <DatePicker  onChange={(d,ds) => this.setState({'time5': ds})} format={dateFormat} id="gathering_time5" />
                  </Item>
                  <Item label="采集人员">
                    <Input id="gathering_person5"/>
                  </Item>
                  <Item label="采集单位">
                    <Input id="gathering_units5"/>
                  </Item>
                  <Item label="存放位置">
                    <Input id="store_place5" />
                  </Item>
                  <Item label="存放数量">
                    <Input id="store_num5" />
                  </Item>
                </Form>
              </Modal>
              <Radio value={6}>
                <Button
                  type="primary"
                  onClick={() => this.setModal6Visible(true)}
                >
                  其他类型样品
              </Button>
              </Radio>
              <Modal
                title="其他类型样品"
                visible={this.state.modal6Visible}
                onOk={() => this.setModal6Visible(false)}
                onCancel={() => this.setModal6Visible(false)}
              >
                <Form {...formItemLayout} onSubmit={this.onSubmit} colon={false}>
                  <Item label="原产国">
                    <Input id="gathering_country6"/>
                  </Item>
                  <Item label="采集地区（行政区）">
                    <Input id="gathering_area6"/>
                  </Item>
                  <Item label="采集地点">
                    <Input id="gathering_place6"/>
                  </Item>
                  <Item label="生境图片">
                    <Input id="habitat_picture6" type="file" style={{display: 'none'}} />
                    <Search
                      placeholder=""
                      enterButton="上传"
                      onSearch={value => document.getElementById("habitat_picture6").click()}
                    />
                  </Item>
                  <Item label="气候特征">
                    <Input id="climate_feature6"/>
                  </Item>
                  <Item label="天气状况">
                    <Input id="in_weather6"/>
                  </Item>
                  <Item label="样品信息">
                    <Input id="in_sample6"/>
                  </Item>
                  <Item label="采集时间">
                    <DatePicker  onChange={(d,ds) => this.setState({'time6': ds})} format={dateFormat} id="gathering_time6" />
                  </Item>
                  <Item label="采集人员">
                    <Input id="gathering_person6"/>
                  </Item>
                  <Item label="采集单位">
                    <Input id="gathering_units6"/>
                  </Item>
                  <Item label="存放位置">
                    <Input id="store_place6" />
                  </Item>
                  <Item label="存放数量">
                    <Input id="store_num6" />
                  </Item>
                </Form>
              </Modal>
              <Radio value={7} visible={this.state.modal7Visible}>
                <Button
                  type="primary"
                  onClick={() => this.setModal7Visible(true)}
                >
                  其他来源
                </Button>
              </Radio>
              <Modal
                title="其他来源"
                visible={this.state.modal7Visible}
                onOk={() => this.setModal7Visible(false)}
                onCancel={() => this.setModal7Visible(false)}
              >
                <Form {...formItemLayout} onSubmit={this.onSubmit} colon={false}>
                  <Item label="原产国">
                    <Input id="gathering_country7"/>
                  </Item>
                  <Item label="采集地区（行政区）">
                    <Input id="gathering_area7"/>
                  </Item>
                  <Item label="采集地点">
                    <Input id="gathering_place7"/>
                  </Item>
                  <Item label="生境图片">
                    <Input id="habitat_picture7" type="file" style={{display: 'none'}} />
                    <Search
                      placeholder=""
                      enterButton="上传"
                      onSearch={value => document.getElementById("habitat_picture7").click()}
                    />
                  </Item>
                  <Item label="气候特征">
                    <Input id="climate_feature7"/>
                  </Item>
                  <Item label="天气状况">
                    <Input id="in_weather7"/>
                  </Item>
                  <Item label="样品信息">
                    <Input id="in_sample7"/>
                  </Item>
                  <Item label="采集时间">
                    <DatePicker  onChange={(d,ds) => this.setState({'time7': ds})} format={dateFormat} id="gathering_time7"/>
                  </Item>
                  <Item label="采集人员">
                    <Input id="gathering_person7"/>
                  </Item>
                  <Item label="采集单位">
                    <Input id="gathering_units7"/>
                  </Item>
                  <Item label="其他来源">
                    <Input id="other_src7"/>
                  </Item>
                  <Item label="转移情况">
                    <Input id="gathering_transfer7"/>
                  </Item>
                  <Item label="存放位置">
                    <Input id="store_place7" />
                  </Item>
                  <Item label="存放数量">
                    <Input id="store_num7" />
                  </Item>
                </Form>
              </Modal>
            </Radio.Group>
          </Item>

          <Item label="经度">
            <Input defaultValue={debugValue} id="longitude" />
          </Item>
          <Item label="纬度">
            <Input defaultValue={debugValue} id="latitude" />
          </Item>
          <Item label="海拔高度（m）">
            <Input defaultValue={debugValue} id="altitude" />
          </Item>
          <Item label="生境类型">
            <Input defaultValue={debugValue} id="habitat_type" />
          </Item>
          <Item label="备注说明">
            <Input defaultValue={debugValue} id="remarks" />
          </Item>
          <Item wrapperCol={{ span: 10, offset: 6 }}>
            <Row guuter={16}>
              <Col span={5}>
                <Button type="primary" htmlType="submit">
                  保存
              </Button>
              </Col>
              <Col span={5}>
                <Button type="primary" onClick={this.onCancel}>取消</Button>
              </Col>
              <span id="errorMsg" style={{marginLeft: 20, color: 'red'}}></span>
            </Row>
          </Item>
        </Form>
        <hr style={{ height: 20, border: 'none', background: '#F0F2F5' }} />
        <Table
          loading={this.state.loading}
          pagination={this.paginationProps}
          columns={columns}
          dataSource={this.state.data}
          bordered
          style={{ marginLeft: 12 }}
        />

        {/*弹出框Modal */}
        <Modal
          className="kekeke"
          visible={this.state.showViewModal}
          onOk={() => this.setState({showViewModal: false})}
          onCancel={() => this.setState({showViewModal: false})}
        >
          <Form {...formItemLayout} onSubmit={this.onSubmit} colon={false}> 
          <div style={{ display: "flex" }}>
                <span style={{ flex: 1 }}>
            <Item label="ID" style={{ display: "flex" }}>
              <Input defaultValue={this.state.viewRecord.id} id="id" readOnly />
            </Item>
            <Item label="样品名称">
              <Input defaultValue={this.state.viewRecord.name} id="name" />
            </Item>
            <Item label="精度">
              <Input defaultValue={this.state.viewRecord.add_longitude} id="add_longitude" />
            </Item>
            <Item label="纬度">
              <Input defaultValue={this.state.viewRecord.add_latitude} id="add_latitude" />
            </Item>
            <Item label="海拔高度">
              <Input defaultValue={this.state.viewRecord.add_height} id="add_height" />
            </Item>
            <Item label="原产国" style={{ display: "flex" }}>
              <Input defaultValue={this.state.viewRecord.in_country} id="in_country" />
            </Item>
            <Item label="采集地区（行政区）">
              <Input defaultValue={this.state.viewRecord.r_cjdq} id="r_cjdq" />
            </Item>
            <Item label="采集地点">
              <Input defaultValue={this.state.viewRecord.r_cjdd} id="r_cjdd" />
            </Item>
            <Item label="气候特征">
              <Input defaultValue={this.state.viewRecord.in_climate} id="in_climate" />
            </Item>
            <Item label="天气状况">
              <Input defaultValue={this.state.viewRecord.in_weather} id="in_weather" />
            </Item>
            <Item label="采集时间">
              <DatePicker onChange={(d,ds) => this.setState({ uq_time: ds })} format={dateFormat} defaultValue={moment(this.state.viewRecord.q_time, 'YYYY-MM-DD HH:mm')} id="q_time" />
            </Item>

            </span><span style={{ flex: 1 }}>

            <Item label="采集人员姓名职务">
              <Input defaultValue={this.state.viewRecord.q_person} id="q_person" />
            </Item>
            <Item label="联系情况">
              <Input defaultValue={this.state.viewRecord.in_affiliation} id="in_affiliation" />
            </Item>
            <Item label="存放位置">
              <Input defaultValue={this.state.viewRecord.store_place} id="store_place" />
            </Item>
            <Item label="存放位置">
              <Input defaultValue={this.state.viewRecord.store_place} id="store_place" />
            </Item>
            <Item label="存放数量">
              <Input defaultValue={this.state.viewRecord.store_num} id="store_num" />
            </Item>
            <Item label="最初存入时间">
              <DatePicker onChange={(d,ds) => this.setState({ ustore_date: ds })} format={dateFormat} defaultValue={moment(this.state.viewRecord.store_date, 'YYYY-MM-DD HH:mm')} id="store_date" />
            </Item>
            <Item label="备注信息">
              <Input defaultValue={this.state.viewRecord.remark} id="remark" />
            </Item>

            <Item label="入库人员姓名">
              <Input defaultValue={this.state.viewRecord.worker} id="worker" />
            </Item>
            <Item label="生境类型">
              <Input defaultValue={this.state.viewRecord.habitattype} id="habitattype" />
            </Item>
            <Item label="生境图片">
              <Input readOnly id="habitatimage999" type="file" onChange={env => this.selectFile(env, 999)} style={{ display: 'none' }} />
              <Search
                readOnly
                id="habitatimage_s999"
                placeholder=""
                enterButton="上传"
                defaultValue={this.state.viewRecord.habitatimage}
                onSearch={value => document.getElementById("habitatimage999").click()}
              />
            </Item>
            <Item label="描述">
              <Input defaultValue={this.state.viewRecord.otherremarks} id="otherremarks" />
            </Item>


            
            <Item style={this.state.viewRecord.acqType==3 ? {} : {display: 'none'}} label="矿藏性质">
              <Input defaultValue={this.state.viewRecord.mineral_property} id="mineral_property" />
            </Item>
            <Item style={this.state.viewRecord.acqType==3 ? {} : {display: 'none'}} label="矿物中的特色元素">
              <Input defaultValue={this.state.viewRecord.minera_ele} id="minera_ele" />
            </Item>
            <Item style={this.state.viewRecord.acqType==3 ? {} : {display: 'none'}} label="矿藏环境温度">
              <Input defaultValue={this.state.viewRecord.mineral_temperature} id="mineral_temperature" />
            </Item>
            <Item style={this.state.viewRecord.acqType==3 ? {} : {display: 'none'}} label="矿藏环境PH值">
              <Input defaultValue={this.state.viewRecord.mineral_ph} id="mineral_ph" />
            </Item>

            

            <Item style={this.state.viewRecord.acqType==2 ? {} : {display: 'none'}} label="水域性质">
              <Input defaultValue={this.state.viewRecord.naturewater} id="naturewater" />
            </Item>
            <Item style={this.state.viewRecord.acqType==2 ? {} : {display: 'none'}} label="水的深度">
              <Input defaultValue={this.state.viewRecord.waterdepth} id="waterdepth" />
            </Item>
            <Item style={this.state.viewRecord.acqType==2 ? {} : {display: 'none'}} label="水温">
              <Input defaultValue={this.state.viewRecord.field_temperature} id="field_temperature" />
            </Item>
            <Item style={this.state.viewRecord.acqType==2 ? {} : {display: 'none'}} label="水的PH值">
              <Input defaultValue={this.state.viewRecord.phvalue} id="phvalue" />
            </Item>


            <Item style={this.state.viewRecord.acqType==4 ? {} : {display: 'none'}} label="植物名称">
              <Input defaultValue={this.state.viewRecord.plantname} id="plantname" />
            </Item>
            <Item style={this.state.viewRecord.acqType==4 ? {} : {display: 'none'}} label="植物组织或部位">
              <Input defaultValue={this.state.viewRecord.plantpart} id="plantpart" />
            </Item>
            <Item style={this.state.viewRecord.acqType==4 ? {} : {display: 'none'}} label="植物的生态作用或药效">
              <Input defaultValue={this.state.viewRecord.ecologicalfunction} id="ecologicalfunction" />
            </Item>


            <Item style={this.state.viewRecord.acqType==5 ? {} : {display: 'none'}} label="动物名称">
              <Input defaultValue={this.state.viewRecord.animal_name} id="animal_name" />
            </Item>
            <Item style={this.state.viewRecord.acqType==5 ? {} : {display: 'none'}} label="动物组织或部位">
              <Input defaultValue={this.state.viewRecord.animal_parts} id="animal_parts" />
            </Item>
            <Item style={this.state.viewRecord.acqType==5 ? {} : {display: 'none'}} label="动物的药效或其他用途">
              <Input defaultValue={this.state.viewRecord.animals_efficacy} id="animals_efficacy" />
            </Item>

            <Item style={this.state.viewRecord.acqType==1 ? {} : {display: 'none'}} label="植被特点">
              <Input defaultValue={this.state.viewRecord.vegetation} id="vegetation" />
            </Item>
            <Item style={this.state.viewRecord.acqType==1 ? {} : {display: 'none'}} label="表层以下深度（cm）">
              <Input defaultValue={this.state.viewRecord.soildepth} id="soildepth" />
            </Item>
            <Item style={this.state.viewRecord.acqType==1 ? {} : {display: 'none'}} label="土质">
              <Input defaultValue={this.state.viewRecord.soilquality} id="soilquality" />
            </Item>
            <Item style={this.state.viewRecord.acqType==1 ? {} : {display: 'none'}} label="土壤酸碱度(pH值)">
              <Input defaultValue={this.state.viewRecord.soilph} id="soilph" />
            </Item>

            <Item label="&nbsp;" style={this.state.editRecord ? {} : {display: 'none'}} >
              <Button style={{marginTop: 30, marginBottom: 30}} type="primary" onClick={this.update} disabled={!this.state.canEdit} >
                    保存
              </Button>
            </Item>
              </span>
            </div>
          </Form>
        </Modal>

      </div>
    );
  }
}
const WrapperedAcquisitionAddForm = Form.create({
  name: "add acquisition"
})(AcquisitionAddForm);

class AcquisitionAdd extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  onSubmit = () => {
    const { form } = this.form.props;
    form.validateFields((errs, values) => {
      console.log(errs, values);
    });
  };
  render() {
    return (
      <Content>
        <WrapperedAcquisitionAddForm
          wrappedComponentRef={ref => (this.form = ref)}
          onSubmit={this.onSubmit}
        />
      </Content>
    );
  }
}

const styles = {
  container: {
    flex: 1,
    padding: "20px 30px"
  },
  content: {
    flex: 1,
    backgroundColor: "#fff",
    padding: "24px 0"
  }
};

export default AcquisitionAdd;
